<template>
  <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
      <van-cell
        :title="item.title"
        center
        v-for="(item,index) in newList"
        :key="index"
        @click="$router.push(`/article/${item.art_id}`)"
      >
        <template #label>
          <div class="channelImg" v-if="item.cover.images.length===3">
            <!-- src="../../../assets/banner.png" -->
            <img
              :src="item2"
              v-for="(item2, index2) in item.cover.images"
              :key="index2"
              alt
              style="width:80px;height:80px"
            />
          </div>
          <span class="custom-title">
            <span class="aut_name">{{item.aut_name}}</span>
            <span class="comm_count">{{item.comm_count}}评论</span>
            <span class="time">{{item.pubdate | format}}</span>
          </span>
        </template>

        <template #right-icon>
          <!-- src="../../../assets/banner.png" -->

          <img
            v-if="item.cover.images.length===1"
            :src="item.cover.images"
            alt
            style="width:80px;height:80px"
          />
        </template>
      </van-cell>
    </van-list>
  </van-pull-refresh>
</template>
<script>
import { newchannels_api } from "@/api/user.js";
export default {
  props: ["channels"],
  data() {
    return {
      newList: [],
      // 下拉列表
      isLoading: false, // 下拉  开启或关闭
      finished: false,
      loading: false, // 上拉  开启或关闭
      timestamp: "", // 第一次加载时间为当前时间，后面每次加载获取后台返回的时间戳
      error: false,
    };
  },
  methods: {
    // 下拉列表
    async onRefresh() {
      // 1.上拉发送请求获取最新的数据
      const res = await newchannels_api({
        channel_id: this.channels.id,
        timestamp: +new Date(), // 下拉加载为当前时间最新数据
        with_top: 1,
      }).catch(() => {
        this.error = true;
      });
      console.log(res);
      if (res.status === 200) {
        // 每一次下拉不需要将之前的数据合并
        this.newList = res.data.data.results;
      }
      // 2.获取到数据后加载状态结束
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    // 上拉列表  初次进入就会执行一次 用于加载第一屏的数据
    async onLoad() {
      // 一进入到页面就会触发
      // 1.下拉发送请求获取之前的数据
      const res = await newchannels_api({
        channel_id: this.channels.id,
        timestamp: this.timestamp || +new Date(), // 第一次加载为当前时间最新数据
        with_top: 1,
      });
      // console.log(res);
      if (res.status === 200) {
        // 每一次上拉需要将之前的数据合并
        this.newList = [...this.newList, ...res.data.data.results];
      }
      // 2.获取到数据后加载状态结束
      // this.loading = false;
      // 3.获取返回的数据是否有数据，有就还可以触发onload事件，否则就不能
      if (!res.data.data.results.length) {
        this.finished = true;
      } else {
        this.loading = false;
        // 第一次加载时间为当前时间，后面每次加载获取后台返回的时间戳，也就是说获取的是前面获取到的数据后面最新的数据
        this.timestamp = res.data.data.pre_timestamp;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.channelImg img:nth-child(2) {
  margin: 0 30px;
}
</style> 